<template>
  <div>
    <ProductParam :title="product.name">
      <template v-slot:buy>
        <button class="btn" @click="buy">立即购买</button>
      </template>
    </ProductParam>
    <div class="content">
      <div class="item-bg">
        <h2>{{product.name}}</h2>
        <h3>{{product.subtitle}}</h3>
        <p>
          <a href="">全球首款双频 GP</a>
          <span>|</span>
          <a href="">骁龙845</a>
          <span>|</span>
          <a href="">AI 变焦双摄</a>
          <span>|</span>
          <a href="">红外人脸识别</a>
        </p>
        <div class="price">
          <span>￥<em>{{product.price}}</em></span>
        </div>
      </div>
      <div class="item-bg-2"></div>
      <div class="item-bg-3"></div>
      <div class="item-swiper">
        <swiper :options="swiperOption">
          <swiper-slide><img src="/imgs/product/gallery-2.png" alt=""></swiper-slide>
          <swiper-slide><img src="/imgs/product/gallery-3.png" alt=""></swiper-slide>
          <swiper-slide><img src="/imgs/product/gallery-4.png" alt=""></swiper-slide>
          <swiper-slide><img src="/imgs/product/gallery-5.jpg" alt=""></swiper-slide>
          <swiper-slide><img src="/imgs/product/gallery-6.jpg" alt=""></swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
        <p class="desc">小米8 AI变焦双摄拍摄</p>
      </div>
      <div class="item-video">
        <h2>60帧超慢动作摄影<br/>慢慢回味每一瞬间的精彩</h2>
        <p>后置960帧电影般超慢动作视频，将眨眼间的美妙展现得淋漓尽致！<br/>更能AI 精准分析视频内容，15个场景智能匹配背景音效。</p>
        <div class="video-bg" @click="showVideo = !showVideo"></div>
        <div class="video-box" @click="showVideo = false">
          <div class="overlay" v-show="showVideo"></div>
          <div class="video" :class="{'slide': showVideo}">
            <span class="iconfont" @click="showVideo = !showVideo">&#xe611;</span>
            <video src="/imgs/product/video.mp4" muted autoplay controls>
              <!--                里面可以嵌套 具体搜索-->
            </video>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import ProductParam from '../components/ProductParam'
export default {
  name: 'Product',
  data () {
    return {
      showVideo: false,
      product: {}, // shopInfo
      swiperOption: {
        loop: true,
        autoplay: true,
        slidesPerView: 3,
        spaceBetween: 30,
        freeMode: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  },
  components: {
    ProductParam,
    swiper,
    swiperSlide
  },
  mounted () {
    this.getProductInfo()
  },
  methods: {
    getProductInfo() {
      // 获得id的方法
      let id = this.$route.params.id
      this.axios.get('/products/' + id).then((res) => {
        this.product = res
      })
    },
    buy() {
      let id = this.$route.params.id
      this.$router.push('/detail/' + id)
    }
  }
}
</script>

<style scoped lang="scss">
@import "./../assets/scss/config.scss";
@import "./../assets/scss/btn.scss";
@import "./../assets/scss/base.scss";
@import "./../assets/scss/mixin.scss";
.btn{
  margin-left: 20px;
  margin-right: 0;
}
.content {
  .item-bg{
    background:url('/imgs/product/product-bg-1.png') no-repeat center;
    height:718px;
    text-align:center;
    h2{
      font-size:80px;
      padding-top:55px;
    }
    h3{
      font-size:24px;
      letter-spacing: 10px;
    }
    p{
      margin-top:21px;
      margin-bottom:40px;
      a{
        font-size:16px;
        color:#333333;
      }
      span{
        margin:0 15px;
      }
    }
    .price{
      font-size:30px;
      color:#333333;
      em{
        font-style:normal;
        font-size:38px;
      }
    }
  }
  .item-bg-2{
    background:url(/imgs/product/product-bg-2.png) no-repeat center;
    height:480px;
    background-size:1226px 397px;
  }
  .item-bg-3{
    background:url(/imgs/product/product-bg-3.png) no-repeat center;
    height:638px;
    background-size:cover;
  }
  .item-swiper{
    margin:36px auto 52px;
    .desc{
      font-size:18px;
      color:#333333;
      text-align:center;
    }
    img{
      width:100%;
    }
  }
  .item-video{
    height:1044px;
    background-color:#070708;
    margin-bottom:76px;
    color:#FFFFFF;
    text-align:center;
    h2{
      font-size:60px;
      padding-top:82px;
      margin-bottom:47px;
    }
    p{
      font-size:24px;
      margin-bottom:58px;
    }
    .video-bg{
      background:url('/imgs/product/gallery-1.png') no-repeat center;
      background-size:cover;
      width:1226px;
      height:540px;
      margin:0 auto 120px;
      cursor:pointer;
    }
    .video-box{
      .overlay{
        @include position(fixed);
        background-color:#333333;
        opacity: .4;
        z-index:10;
      }
      .video{
        position:fixed;
        top:-50%;
        left:50%;
        transform:translate(-50%,-50%);
        width:1000px;
        height:536px;
        z-index:11;
        opacity:0;
        transition: all .5s;
        &.slide{
          top: 50%;
          opacity: 1
        }
        video {
          width: 100%;
          height: 100%;
          object-fit: cover;
          outline:none;
        }
        span{
          z-index:11;
          position: absolute;
          right: 20px;
          top: 20px;
          cursor: pointer;
          font-size: 20px;
        }
      }
    }
  }
}
</style>
